<template>
  <div class="newPage ">
    <el-tabs
      v-model="tabsActive"
      type="border-card"
      class="tabsPane"
      @tab-click="tabChange"
    >
      <el-tab-pane
        v-for="(item,index) in tasActiveList"
        :key="index"
        :label="item.label"
        :name="item.value"
        class="rowFlex flexWarp tabPane"
      >
        <el-button
          type="primary"
          class="showField"
          @click="showUpField=true"
        >上架栏位</el-button>
        <component
          :is="item.component"
          v-if="tabsActive==item.value"
          :resize-data="resizeData"
          :is-field="true"
          class="component"
          style="margin-top:10px;"
        />
      </el-tab-pane>
      <el-tab-pane
        :name="'111111'"
        disabled
      >
        <slot slot="label">
          <el-button
            size="mini"
            @click="onOpenSetTab"
          >修改栏位名称 </el-button>
        </slot>
      </el-tab-pane>
    </el-tabs>
    <BiDrawer
      v-model="showUpField"
      drawer-title="上架栏位"
      :type="tabsActive"
      :component="upField"
      drawer-size="600px"
      @ok="onSubmit"
    ></BiDrawer>

    <el-dialog
      title="修改栏位名称"
      :visible.sync="isShowDialog"
      width="338px"
      :before-close="handleClose"
    >
      <div class="dialog_box">
        <div class="tabList_item">
          <el-input
            v-model="recommend.title"
            placeholder="请输入内容"
            maxlength="6"
            style="width: 190px;"
          ></el-input>
          <div class="tab_item_img">

          </div>
        </div>
        <div class="tabList_item">
          <el-input
            v-model="hot.title"
            placeholder="请输入内容"
            style="width: 190px;"
            maxlength="6"
          ></el-input>
          <el-popover
            v-model="hot.visible"
            placement="top"
            width="220"
          >
            <div
              slot="reference"
              class="tab_item_img img_hot"
            >
              <el-image
                :src="hot.icon"
                style="width: 50px; height: 50px; border-radius: 5px"
              ></el-image>
              <div class="tab_item_img_hover">
                <SvgIcon icon-class="new-toggle"></SvgIcon>
              </div>
            </div>
            <div>
              <p class="image_title">请选择图标</p>
              <div class="image_list">
                <span
                  v-for="(item, index) in img_list"
                  :key="index"
                  :class="hot.icon == item.url ? 'hot_active' : ''"
                >
                  <span
                    v-if="lineUp.icon == item.url"
                    class="layer"
                  >

                  </span>
                  <el-image
                    :src="item.url"
                    style="width: 50px; height: 50px; border-radius: 5px;margin: 5px;cursor: pointer;"
                    @click="hot.icon = item.url"
                  ></el-image>
                </span>

              </div>
            </div>
          </el-popover>
        </div>
        <div class="tabList_item">
          <el-input
            v-model="lineUp.title"
            placeholder="请输入内容"
            style="width: 190px;"
            maxlength="6"
          ></el-input>

          <el-popover
            v-model="lineUp.visible"
            placement="top"
            width="220"
          >
            <div
              slot="reference"
              class="tab_item_img img_hot"
            >
              <el-image
                :src="lineUp.icon"
                style="width: 50px; height: 50px; border-radius: 5px"
              ></el-image>
              <div class="tab_item_img_hover">
                <SvgIcon icon-class="new-toggle"></SvgIcon>
              </div>
            </div>
            <div>
              <div class="image_list">
                <span
                  v-for="(item, index) in img_list"
                  :key="index"
                  :class="lineUp.icon == item.url ? 'hot_active' : ''"
                >
                  <span
                    v-if="hot.icon == item.url"
                    class="layer"
                  >

                  </span>
                  <el-image
                    :src="item.url"
                    style="width: 50px; height: 50px; border-radius: 5px;margin: 5px;cursor: pointer;"
                    @click="lineUp.icon = item.url"
                  ></el-image>
                </span>

              </div>
            </div>
          </el-popover>
        </div>

      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          @click="onSetTabOk"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BiDrawer from '@/components/BiDrawer'
import { mapState } from 'vuex'
import recommend from '../theater/component/recommend.vue'
import lineUp from '../theater/component/lineUp.vue'
import hot from '../theater/component/hot.vue'
import wallpaper from '../wallpaper/index.vue'
import swipper from '../theater/component/swiper.vue'
import introduce from '../introduce/index.vue'
import upField from './component/upField.vue'
import { getranklist, getrankicon } from '@/api/common'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { POST_mini_app_rank_save } from '@/api/appContent/introduce'
export default {
  components: {
    SvgIcon,
    recommend,
    lineUp,
    hot,
    wallpaper,
    swipper,
    introduce,
    upField,
    BiDrawer
  },

  data() {
    return {
      upField: upField,
      resizeData: false, // 刷新列表数据
      tabsActive: '4',
      tasActiveList: [],
      labelName: '',
      showUpField: false,
      isShowDialog: false,
      hot: {},
      lineUp: {},
      recommend: {},
      img_list: []
    }
  },
  mounted() {
    this.ongetranklist()
    this.ongetrankicon()
  },
  methods: {
    tabChange() {
      this.labelName = this.tasActiveList.find(item => item.value === this.tabsActive) ? this.tasActiveList.find(item => item.value === this.tabsActive).label : ''
      this.$AccessReport.report('zhangyu-appContent-field', [this.$store.state.user.routerItem.name, '内容管理', '栏位管理', this.labelName])
    },
    async onSetTabOk() {
      const params = []
      params.push({ title: this.hot.title, icon: this.hot.icon, type: this.hot.type })
      params.push({ title: this.lineUp.title, icon: this.lineUp.icon, type: this.lineUp.type })
      params.push({ title: this.recommend.title, icon: this.recommend.icon, type: this.recommend.type })
      if (this.hot.title && this.lineUp.title && this.recommend.title) {
        const res = await POST_mini_app_rank_save({ ranks: params })
        if (res.status_code === 1) {
          this.handleClose()
          this.ongetranklist()
        }
      } else {
        this.$message.error('名称不能为空')
      }
    },
    async ongetrankicon() {
      const res = await getrankicon()
      this.img_list = res.data
    },
    async ongetranklist() {
      const res = await getranklist()
      const typeComponent = {
        1: 'hot',
        2: 'lineUp',
        4: 'recommend',
        6: 'swipper'
      }
      if (res.status_code === 1) {
        console.log(res)
        this.hot = res.data
        this.tasActiveList = res.data.map((item) => {
          if (item.type == 1) {
            this.hot = item
          } else if (item.type == 2) {
            this.lineUp = item
          } else if (item.type == 4) {
            this.recommend = item
          }
          return {
            label: item.type == 6 ? '轮播管理' : item.title,
            value: item.type + '',
            component: typeComponent[item.type],
            icon: item.icon
          }
        })
        this.labelName = this.tasActiveList.find(item => item.value === this.tabsActive) ? this.tasActiveList.find(item => item.value === this.tabsActive).label : ''
        this.$AccessReport.report('zhangyu-appContent-field', [this.$store.state.user.routerItem.name, '内容管理', '栏位管理', this.labelName])
      }
    },
    handleClose() {
      this.isShowDialog = false
      console.log(this.tasActiveList, '>>>>>>>this.tasActiveList')
      this.tasActiveList.map((item, index) => {
        const _item = {
          title: item.label,
          type: item.value + '',
          icon: item.icon
        }
        if (_item.type == 1) {
          this.hot = _item
        } else if (_item.type == 2) {
          this.lineUp = _item
        } else if (_item.type == 4) {
          this.recommend = _item
        }
      })
    },
    onOpenSetTab() {
      this.isShowDialog = true
    },
    showField() {},
    onSubmit() {
      this.resizeData = true
      setTimeout(() => {
        this.resizeData = false
      }, 50)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .svg-icon {
  width: 1.4em;
  height: 1.4em;
}
.dialog-footer {
  bottom: -3px;
  padding-right: 0;
}
::v-deep .el-dialog {
  min-width: 338px !important;
}
.image_title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #4e5969;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin: 0 0 10px 6px;
}
.image_list {
  span {
    display: inline-block;
    margin: 0 2px;
  }
}
.layer {
  position: absolute;
  width: 60px;
  height: 65px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}
.hot_active {
  ::v-deep .el-image {
    img {
      border-radius: 14px;
      border: 2px solid #00bf8a;
    }
  }
}
.tabList_item {
  height: 60px;
  background: #f7f8fa;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
  .tab_item_img {
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
  .img_hot:hover {
    .tab_item_img_hover {
      display: flex;
    }
  }
  .img_lineUp:hover {
    .tab_item_img_hover {
      display: flex;
    }
  }
  .tab_item_img_hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
::v-deep .el-tabs__nav {
  width: 100%;
}
::v-deep .el-tabs__item.is-top:last-child {
  float: right;
}
.newPage {
  margin-top: -10px;
  ::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  .tabPane {
    position: relative;
  }
  .showField {
    position: absolute;
    right: 20px;
    top: 32px;
    z-index: 100;
  }

  ::v-deep .content-outer .content-table {
    margin-top: 0px;
  }
  .action-box {
    margin-bottom: 0 !important;
  }
  ::v-deep .conten {
    background: #fff;
  }
}
.component {
  width: 100%;
}
</style>
